<template>
    <div class="news-detal">
        <div class="nav-title">
            <img src="@/img/pic4.jpg">
            <h1>业界新闻 >>新闻详情</h1>
        </div>
        <div class="supply">
            <el-row>
                <el-col :lg="18" :sm="24" :xs="24">
                    <div class="news-content">
                        <div class="news-title">
                            <h1>{{news.title}}</h1>
                            <p>
                                <span>发布时间:{{news.publish}}</span>
                                <span>发布人:{{news.writer}}</span>
                            </p>
                        </div>
                        <div class="news-dec" v-html="news.content">
                        </div>
                    </div>
                </el-col>
                <el-col :lg="6" :sm="24" :xs="24">
                    <div class="sort">
                        <h1>物流查询</h1>
                        <ul>
                            <li v-for="item in assitant" :key="item.id">
                                <a :href="item.address">{{ item.aname }}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="tgfw">
                        <h1>供需信息</h1>
                        <el-row>
                            <el-col :lg="24" :sm="24" :xs="24" v-for="item in orders.purchase" :key="item.orderid">
                                <div>
                                    <img :src="item.img1">
                                    <div class="box-font">
                                        <h3>{{ item.goodsname }}</h3>
                                        <p>{{ item.orderNameen }}</p>
                                        <router-link :to="`/pdetails?id=${item.orderid}`">
                                            <el-button type="danger" round>采购订单</el-button>
                                        </router-link>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :lg="24" :sm="24" :xs="24" v-for="item in orders.supply" :key="item.orderid">
                                <div>
                                    <img :src="item.img1">
                                    <div class="box-font">
                                        <h3>{{ item.goodsname }}</h3>
                                        <p>{{ item.orderNameen }}</p>
                                        <router-link :to="`/sdetails?id=${item.orderid}`">
                                            <el-button type="success" round>供应订单</el-button>
                                        </router-link>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import { toRefs, reactive, onMounted, getCurrentInstance } from 'vue'
import { useRoute } from 'vue-router'
export default {
    setup() {
        const data = reactive({
            assitant: [],//国际物流
            orders: {},//供需信息
            id: "",//编号
            news:{},//新闻详情
        })
        const route = useRoute()
        const { proxy } = getCurrentInstance()
        onMounted(async () => {
            data.id = route.query.id
            //国际物流
            await proxy.$axios.get("/api/assitant", { params: {} })
                .then(function (response) {
                    var arr = JSON.parse(response.data)
                    console.log(arr)
                    data.assitant = arr
                })
                .catch(function (error) {
                    console.log(error);
            });
            //提供服务 
            await proxy.$axios.get("/api/orders", { params: {} })
            .then(function (response) {
                var arr = JSON.parse(response.data)
                for (var obj in arr) {
                    for (var v of arr[obj]) {
                        v.img1 = `/src/${v.img1}`
                    }
                }
                data.orders = arr
            })
            //新闻详情
            try {
                // 获取新闻详情数据
                const responseNews = await proxy.$axios.get("/api/newsbyid", { params: { id: data.id } })
                let content = responseNews.data.content
                const regex = /src="([^"]*)"/g;
                let match;
                let i = 1;

                while ((match = regex.exec(content)) !== null) {
                    content = content.replace(match[0], `src="/src/img/new${i}.png" width="300"`);
                    if (i === 4) {
                        i = 0
                    }
                    i++
                }
                data.news = {
                    ...responseNews.data,
                    content: content
                }
            } catch (error) {
                console.error("Failed to fetch news data:", error)
            }
        })
        return {
            ...toRefs(data)
        }
    },
}

</script>
<style scoped>
.news-title {
    padding: 5px 0px;
    text-align: center;
    border-bottom: 1px solid rgb(4, 94, 211);
}

.news-title p {
    padding: 15px 0px;
    line-height: 24px;
    font-size: 14px;
}

.news-title p span {
    margin: 0px 20px;
}

.news-dec {
    padding: 20px;
    font-size: 40px;
    margin-bottom: 5px;
}

.news-dec img {
    display: block;
    width: 80%;
    height: auto;
    margin: 10px auto;
}

.news-dec p {
    font-size: 14px;
    line-height: 24px;
    color: #333;
    text-indent: 28px;
    margin: 10px 0px;
}
</style>